<!--
  Generated template for the SearchPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header class='search-header'>

  <button class="search-back" (click)="dissmiss()">

  </button>
  <ion-title class="search-title">
    <ion-item class='search'>
      <ion-input placeholder='搜素美图，美甲师，店铺' id='search-input' class='search-input' (ionFocus)='getFocus()' (ionBlur)='loseFocus()'
        (keyup)="getTheKeyDown($event,mtto)" [(ngModel)]='myInput'></ion-input>
    </ion-item>
  </ion-title>
  <button class="shousuo" (click)='searchAPI(mtto)'>搜索</button>
</ion-header>



<div class="flex" *ngIf='isResultNull && isHasSearch'>
  <img src="assets/img/search--@2x.png" alt="">
  <p>whoops 没有搜索到你想要的</p>
  <p>换个姿势再来哦</p>
</div>

<ion-content padding *ngIf="!(isResultNull && isHasSearch)">
  <!-- <div class='tishi' *ngIf='isResultNull && isHasSearch'>
    <p>暂时没有找到相关信息</p>
    <p>为你推荐与“{{showInput}}”相关的其他信息</p>
  </div> -->



  <!-- 显示搜索的结果  -->
  <ion-list class="searchShow" *ngIf='isHasSearch' id="bore">
    <ion-card *ngIf='nailsCount!=0'>
      <ion-card-header>
        美图美款
        <span class="resultCount">{{nailsCount}}条记录</span>
      </ion-card-header>
      <ion-card-content > 
        <ion-list class='resultList' [ngClass]="{'isMore':isNailsMore}">
          <ion-item *ngFor='let item of nails' class="resultItem" (click)="skipTopage(1,{'id':item.nail_id})" text-center>
            <img src="{{rootPicUrl}}{{item.nail_img}}" alt="" class="resultImg">
            <p class="mtto" title="{{item.nail_name}}">{{item.nail_name}}</p>
          </ion-item>
        </ion-list>
        <div class='getMore' *ngIf='!isNailsMore' text-center (click)="getMore(1)">
          <img src="./assets/img/back.png" alt="">
        </div>
      </ion-card-content>
    </ion-card>
    <ion-card *ngIf='artistsCount!=0'>
      <ion-card-header>
        美甲师
        <span class="resultCount">{{artistsCount}}条记录</span>
      </ion-card-header>
      <ion-card-content>
        <ion-list class='resultList' [ngClass]="{'isMore':isArtistsMore}">
          <ion-item *ngFor='let item of artists' class="resultItem" text-center (click)="skipTopage(2,item)">
            <img src="{{rootPicUrl}}{{item.artist_avator}}" alt="" class="resultImg">
            <p class="mtto" #mtto title="{{item.artist_nickname}}">{{item.artist_nickname || ' '}}</p>
         <span style="display: flex;justify-content: center"><img src="assets/img/chuji@2x.png" *ngIf='item.artist_level==1' alt="" srcset="" style="width: 2.5rem;height: 1.2rem;"></span>
         <span style="display: flex;justify-content: center"><img src="assets/img/zhongji@2x.png" *ngIf='item.artist_level==2' alt="" srcset="" style="width: 2.5rem;height: 1.2rem;"></span>
         <span style="display: flex;justify-content: center"><img src="assets/img/gaoji@2x.png" *ngIf='item.artist_level==3' alt="" srcset="" style="width: 2.5rem;height: 1.2rem;"></span>
          </ion-item>
        </ion-list>
        <div class='getMore' *ngIf='!isArtistsMore' text-center (click)="getMore(2)">
          <img src="./assets/img/back.png" alt="">
        </div>
      </ion-card-content>
    </ion-card>
    <ion-card *ngIf='shopsCount!=0'>
      <ion-card-header>
        美甲店
        <span class="resultCount">{{shopsCount}}条记录</span>
      </ion-card-header>
      <ion-card-content >
        <ion-list  class='resultList' [ngClass]="{'isMore':isShopsMore}">
          <ion-item id="mtto1" *ngFor='let item of shops' class="resultItem" text-center (click)="skipTopage(3,{'shop_id':item.shop_id})">
            <img src="{{rootPicUrl}}{{item.shop_logo}}" alt="" class="resultImg">
            <p class="mtto" title='{{item.shop_name}}'>{{item.shop_name}}</p>

          </ion-item>
        </ion-list>
        <div class='getMore' *ngIf='!isShopsMore' text-center (click)="getMore(3)">
          <img src="./assets/img/back.png" alt="">
        </div>
      </ion-card-content>
    </ion-card>
  </ion-list>


  <!--搜索之后 如果没有联网 显示的 网络异常的 界面  -->
  <div *ngIf='isHasSearch && lostNet' class='loseNet' text-center>
    <!-- <div *ngIf='isBeforeSearch' class='loseNet' text-center>  -->
    <img src="assets/img/wuwangluo.png" alt="">
    <span class='msg'>网络好像除了问题</span>
    <button ion-button clear color='dark' (click)='togetSearchAgain()' class='red'>刷新试试</button>
  </div>

  <!-- 在搜索之前显示的页面 -->
  <ion-list class='beforeSearch' *ngIf='isBeforeSearch && !isHasSearch'>
    <div class='beforeContent'>
      <h3>热门搜索</h3>
      <span class='search-item' (click)="clickForSearch(item)" *ngFor='let item of searchHint'>
        {{item}}
      </span>
    </div>
    <div class='beforeContent'>
      <h3>历史记录</h3>
      <span class='search-item' (click)="clickForSearch(item)" *ngFor='let item of historyList'>
        {{item}}
      </span>
    </div>
    <!-- <div class='beforeContent'></div> -->
  </ion-list>

  <!-- 在输入的搜索词之后 显示的搜索列表  -->
  <ion-list class='' *ngIf='!isBeforeSearch && !isHasSearch' class='historyList'>
    <h3>搜索记录
      <ion-icon name='ios-trash-outline' class='delImg' (click)='delHistory()'></ion-icon>
    </h3>
    <button *ngFor='let item of historyList' clear ion-button text-left color='dark' (click)="clickForSearch(item)" class='historyItem'>
      {{item}}
    </button>
  </ion-list>

</ion-content>